import * as Vue from "vue";
import HelloWorld, {
  HelloWorldProps,
  HelloWorldExpose,
  HelloWorldSlots,
} from "@/components/HelloWorldByTsx";
import EventBus from "@/utils/EventBus";
import { useRouter } from "vue-router";

export default Vue.defineComponent({
  name: "ByTsx",

  // 视图
  render() {
    return (
      <div class="home">
        <img alt="Vue logo" src={require("@/assets/logo.png")} />
        <br />
        <button onClick={this.helloWorld?.handleInputClear}>
          点击清空input
        </button>
        <br />
        <button onClick={() => (this.isShowLink = !this.isShowLink)}>
          {this.isShowLink ? "不显示" : "显示"}相关链接
        </button>

        {/* ref 可以直接填字符串，vue 会解析 setup 有没有返回同名的引用 */}
        <HelloWorld
          ref="helloWorld"
          msg="简单的参数传递"
          config={{
            isShowLink: this.isShowLink,
          }}
          list={this.list}
          v-slots={
            {
              default: () => <h1>测试默认插槽</h1>,
              test1: () => <h1>测试命名插槽</h1>,
              testParam: (param) => <h1>测试插槽参数：{param}</h1>,
            } as HelloWorldSlots
          }
          onHandleInput={(val) => console.log(val)}
        />
      </div>
    );
  },

  // setup 只触发一次，相对于之前的 created
  setup() {
    Vue.onMounted(() => {
      EventBus.$emit("ON_MOUNTED", useRouter().currentRoute.value.name);
    });

    const data = Vue.reactive({
      list: [
        { id: 1, name: "fanzhiliang", age: 25 },
        { id: 2, name: "alcyh", age: 26 },
      ] as HelloWorldProps["list"],
      isShowLink: false,
    });

    // 获取子组件的引用
    const helloWorld = Vue.ref<
      InstanceType<typeof HelloWorld> & HelloWorldExpose
    >();

    return {
      ...Vue.toRefs(data),
      helloWorld,
    };
  },
});
